如果表匹配字符串,则更新表

时间:2016-12-20 08:54:56

标签: javascript

如果字符串匹配a,我想更新我的表 表格单元格

示例,如果我的字符串值是jhonyy 我想更新一行,其中包含jhonyy作为值,并通过文本框更新其第3列年龄。

<script type="text/javascript">
        var table = document.getElementById("tbl_test");
        for (var i = 0, row; row = table.rows[i]; i++) {
       //iterate through rows
       //rows would be accessed using the "row" variable assigned in the for loop
       for (var j = 0, col; col = row.cells[j]; j++) {
         //iterate through columns
         //columns would be accessed using the "col" variable assigned in the for loop
       }  
     }
    </script>`

我做了一些研究,只是卡在这里。我不知道如何访问行和单元格。

enter image description here

这是片段

<!DOCTYPE html>
<html>
<body>
  <table id="tbl_test" style="width:50%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jhonyy</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>
  <br />
  <br />
  <p id="demo"></p>
  <button id="btn_test" value="test" onclick="test_table()">Test</button>
  <input type="text" id="txt_test" name="txt_test">

  <script type="text/javascript">
    function test_table()
    {
     var table = document.getElementById("tbl_test");
     for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop
     if (cell.textContent == 'jhonyy') 
     {
      change_text();
    }
  }  
}
}
function change_text() {
  var x = document.getElementById("btn_test").value;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

编辑:如果 if 语句为true,我试图运行一个函数。它不仅仅是一个测试。

1 个答案:

答案 0 :(得分:1)

你想要那样的东西吗?     

<!DOCTYPE html>
<html>
    <body>
        <table id="tbl_test" style="width:50%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Jhonyy</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
            </tr>
        </table>
        <br />
        <br />
        <p id="demo"></p>
        <button id="btn_test" value="test" onclick="test_table()">Test</button>
        <input type="text" id="txt_test" name="txt_test">
        <script type="text/javascript">
            function test_table()
            {
				var table = document.getElementById("tbl_test");
				for (var i = 0, row; row = table.rows[i]; i++) {
               //iterate through rows
               //rows would be accessed using the "row" variable assigned in the for loop
					for (var j = 0, cell; cell = row.cells[j]; j++) {
             //iterate through columns
             //columns would be accessed using the "col" variable assigned in the for loop
						if (cell.textContent == 'Jhonyy') 
						{
							change_text(i);
						}
					}  
				}
            }
            function change_text(row) {
				var txt = document.getElementById("txt_test").value;
				var table = document.getElementById("tbl_test");
				table.rows[row].cells[2].textContent = txt ; // cells[2] => third col
            }
        </script>
    </body>
</html>