मेरे पास संबंधित जेएस फ़ाइल वाला एक HTML पृष्ठ है। इसका उद्देश्य तालिका में डाले गए डेटा को JSON फ़ाइल में बदलना है। उपयोगकर्ता तालिका कक्षों को संपादित कर सकता है, और बटन पर क्लिक कर सकता है ताकि जावास्क्रिप्ट फ़ाइल डेटा को पार्स कर सके और सर्वर पर एक PHP फ़ाइल को अजाक्स अनुरोध के रूप में भेज सके। PHP फ़ाइल तब डेटा को सर्वर पर फ़ाइल के रूप में संग्रहीत करती है और लिंक को वापस भेजती है। टैग के लिए, मुझे चयनित मान प्राप्त करने के लिए टेक्स्ट() के बजाय वैल() का उपयोग करने की आवश्यकता है। हालांकि, वैल() एक खाली स्ट्रिंग देता है। इसे सही तरीके से रिटर्न वैल्यू कैसे बनाएं?

var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table-add').click(function () {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});

$('.table-remove').click(function () {
  $(this).parents('tr').detach();
});

$('.table-up').click(function () {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table-down').click(function () {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
	//alert("ok");
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];
  
  // Get the headers (add special header logic here)
  $($rows.shift()).find('th:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });
  
  // Turn all existing rows into a loopable array
  $rows.each(function () {
    var $td = $(this).find('td');
    var h = {};
    // Use the headers from earlier to name our hash keys
    headers.forEach(function (header, i) {
      h[header] = $td.eq(i).val();  
		alert($td.eq(i).val());
    });
    
    data.push(h);
  });
  
  // Output the result
  normaldata = JSON.stringify(data);
  $.ajax({
      type: "POST",
      url: "filemaker.php",
      data:  {"data":normaldata},
      success: function(output) {

         
		var a = document.createElement('a');
		a.href = 'data.gmp'
		a.download = "data.gmp";
		a.click();
		//alert("reached here");
    }
});

  
});
.table-editable {
  position: relative;
}
.table-editable .glyphicon {
  font-size: 20px;
}

.table-remove {
  color: #700;
  cursor: pointer;
}
.table-remove:hover {
  color: #f00;
}

.table-up, .table-down {
  color: #007;
  cursor: pointer;
}
.table-up:hover, .table-down:hover {
  color: #00f;
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
}
.table-add:hover {
  color: #0b0;
}
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5 Editable Table</title>
  
  
 <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
<a href='text.html' >aa</a>
  <div class="container">
  <h1>HTML5 Editable Table</h1>
  <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p>
  
  <ul>
    <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> 
    <li>Simple / powerful features such as add row, remove row, move row up/down.</li>
  </ul>
  
  <div id="table" class="table-editable">
    <span class="table-add glyphicon glyphicon-plus"></span>
    <table class="table">
      <tr>
        <th>Type</th>
        <th>Doctor</th>
        <th>Specialization</th>
        <th>City</th>
        <th>Area</th>
        <th>Rank</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true"> 
		<select> 
			<option value='pharmacist'>Pharmacist</option>
			<option value='doctor'>Doctor</option>
		</select>
	  </td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
         <td contenteditable="true"> 
		<select> 
			<option value='A+'>A+</option>
			<option value='A'>A</option>
			<option value='B'>B</option>
			<option value='C'>C</option>
		</select>
	  </td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
    
      </tr>
      <!-- This is our clonable table line -->
      <tr class="hide">
	   <td contenteditable="true"> 
		<select> 
			<option value='pharmacist'>Pharmacist</option>
			<option value='doctor'>Doctor</option>
		</select>
	  </td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true"> 
		<select> 
			<option value='A+'>A+</option>
			<option value='A'>A</option>
			<option value='B'>B</option>
			<option value='C'>C</option>
		</select>
	  </td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
 
      </tr>
    </table>
  </div>
  
  <button id="export-btn" class="btn btn-primary">Export Data</button>
  <p id="export"></p>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>
0
HussainBiedouh 2 अक्टूबर 2018, 21:01

1 उत्तर

आपके एल्गोरिथम की पहली वापसी ($td.eq(i)) is

<td contenteditable="true"> 
    <select> 
        <option value="pharmacist">Pharmacist</option>
        <option value="doctor">Doctor</option>
    </select>
</td>

और <td contenteditable="true"> में विशेषता मान नहीं है, इसलिए आपके पास शून्य मान है

और दूसरा मान है

<td contenteditable="true">stir-fry</td>

इसका वही मूल्य नहीं है, इसलिए शून्य भी लौटाएं

बस .text() का उपयोग करें यह स्पष्ट है। क्योंकि .text() को टैग में केवल टेक्स्ट मिलेगा

मुझे आशा है कि मैं मदद कर सकता हूं और समझ सकता हूं कि मैं क्या कहता हूं लॉल ...

0
yuanganteng 2 अक्टूबर 2018, 18:36